jQuery fadeIn()
The jQuery fadeIn() method is used to gradually change the opacity of the
selected elements from hidden to visible (fading them in).
This method can take an optional speed parameter to control the duration of
the animation.
Syntax
$(selector).fadeIn(speed, easing, callback);
- speed (optional): The duration of the effect. Can be slow, fast, or a number of milliseconds (e.g., 400).
- easing (optional): The easing function for the transition. Default is swing, and another option is linear.
- callback (optional): A function to execute once the fade-in is complete.
<!DOCTYPE html>
<html>
<head>
<title>jQuery fadeIn() Example</title>
</head>
<body>
<button id="fadeButton">Fade In</button>
<div id="content" style="display:none; background-color: lightblue;
width: 200px; height: 100px;">
Hello, this is a fadeIn effect!
</div>
<script>
$(document).ready(function() {
$("#fadeButton").click(function() {
$("#content").fadeIn(1000,
'swing', function() {
alert("Fade-in
complete!");
});
});
});
</script>
</body>
</html>
